<template>
  <view class="novel-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
     <view class="back-icon" @click="goBack">
        <uni-icons type="left" size="24"></uni-icons>
      </view>
      <view class="nav-title">{{ novel.name }}</view>
      <view class="catalog-icon" @click="openPopup()">
        <uni-icons type="list" size="24"></uni-icons>
      </view>
    </view>
    <!-- 小说封面与基本信息 -->
    <view class="cover-info-container">
      <view class="cover">
        <image :src="novel.imagePath" mode="aspectFit"></image>
      </view>
      <view class="info">
        <view class="title">{{ novel.title }}</view>
        <view class="author">作者: {{ novel.author }}</view>
        <view class="category">分类: {{ novel.categoryName }}</view>
		<view class="category" v-if="novel.username!=null">上传人: {{ novel.username }}</view>
        <!-- <view class="status">状态: {{ novel.status }}</view>
		 -->
		 <!-- <view class="status">小说简介: {{ novel.desc }}</view> -->
      </view>
    </view>
    <!-- 小说简介 -->
    <view class="description">
      <view class="desc-title">小说简介</view>
      <view class="desc-content">{{ novel.desc }}</view>
    </view>
    <!-- 阅读按钮 -->
    <view class="button-container">
      <button class="read-button" @click="startReading" size="mini">{{startReadButtonText}}</button>
	  <button class="read-button" @click="openPopup" size="mini">查看目录</button>
    </view>
    <!-- 目录弹出层 -->
    <uni-popup ref="popupRef" :show="showCatalog" type="left" @close="showCatalog = false">
      <view class="catalog">
        <view class="catalog-title">小说目录   共{{novel.chapterCount}}章</view>
        <view class="chapter-list">
			<scroll-view>
				<view v-for="(chapter, index) in novel.chapters" :key="index" @click="goToChapter(chapter.id)">
				  <view class="chapter-title">{{chapter.index}}.{{ chapter.title }}</view>
				  <view class="chapter-divider"></view>
				</view>
			</scroll-view>
        </view>
<!--        <view class="pagination">
          <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
          <span>{{ currentPage }} / {{ totalPages }}</span>
          <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
        </view> -->
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {loginBefore,baseUrl} from '../../static/js/util.js'
let id=''
let authorization =''
let historyChapterId=''
let startReadButtonText=ref("开始阅读")
// 模拟小说数据
const novel = ref({
  cover: 'https://picsum.photos/200/300',
  title: '示例小说',
  author: '示例作者',
  name:'',
  category: '玄幻',
  status: '连载中',
  description: '这是一部非常精彩的玄幻小说，讲述了主角在奇幻世界中的冒险故事。',
  chapters: [
    { title: '第一章 神秘的开始' },
    { title: '第二章 踏上征程' },
    { title: '第三章 初遇危机' },
    { title: '第四章 结识伙伴' },
    { title: '第五章 深入险境' },
    { title: '第六章 突破困境' },
    { title: '第七章 新的挑战' },
    { title: '第八章 实力提升' },
    { title: '第九章 遭遇强敌' },
    { title: '第十章 绝地反击' }
  ]
});

// 返回上一页
const goBack = () => {
  uni.switchTab({
  	url:'/pages/book/book'
  })
};
const showCatalog = ref(false);
const popupRef = ref(null);
function openPopup(){
	popupRef.value.open()
}

// 开始阅读的方法
const startReading = () => {
	let progress={
		chapterId:historyChapterId
	}
	// console.log(novel.value.chapters[0].id)
	localStorage.setItem(`bookProgress_${id}`, JSON.stringify(progress) );
	uni.navigateTo({
		url: '/pages/bookContent/bookContent?bookId='+id+'&chapterId='+historyChapterId // 跳转到阅读页面，从第一章开始
	});
};

// 跳转到指定章节的方法
const goToChapter = (chapterId) => {
	let progress={
		chapterId:chapterId
	}
	localStorage.setItem(`bookProgress_${id}`, JSON.stringify(progress) );
  uni.navigateTo({
    url: `/pages/bookContent/bookContent?bookId=${id}&chapterId=${chapterId}`
  });
};

// 控制目录弹出层显示隐藏


// 分页相关数据
const pageSize = ref(3);
const currentPage = ref(1);

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(novel.value.chapters.length / pageSize.value);
});

// 计算当前页的章节
const currentPageChapters = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return novel.value.chapters.slice(start, end);
});

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

function requestDetail(){
	uni.request({
		url:baseUrl+'/book/detail?id='+id,
		header: {
			'Authorization': authorization
		},
		success:(res)=>{
			novel.value=res.data.data
			console.log(novel)
		}
	})
}


	onLoad(option => {
		authorization = localStorage.getItem("Authorization")
		loginBefore()
		if (option.id != null) {
			id = option.id
			requestDetail()
			let bookHistory=localStorage.getItem(`bookProgress_${id}`);
			if(bookHistory!=null){
				startReadButtonText.value="继续阅读"
				// console.log(JSON.parse(bookHistory).chapterId)
				historyChapterId=JSON.parse(bookHistory).chapterId
			}else{
				historyChapterId=novel.value.chapters[0].id
			}
		}
	})
</script>

<style scoped>
.novel-detail {
  background-color: #f5f5f5;
  min-height: 90vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  justify-content: space-between;
}

.back-icon {
  margin-right: 10px;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
}

.catalog-icon {
  margin-left: 10px;
}

.cover-info-container {
  display: flex;
  padding: 20px;
  background-color: #fff;
  margin-top: 10px;
}

.cover {
  width: 120px;
  height: 180px;
  margin-right: 20px;
}

.cover image {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.info {
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.author,
.category,
.status {
  font-size: 14px;
  color: #666;
  margin-bottom: 3px;
}

.description {
  padding: 20px;
  background-color: #fff;
  margin-top: 10px;
}

.desc-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.desc-content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.button-container {
  padding: 20px;
  text-align: center;
}

.read-button {
  background-color: #8787a2;
  color: white;
  padding: 12px;
  margin: 30rpx;
  border-radius: 5px;
  font-size: 16px;
  width: 40%;
  border: none;
}

.catalog {
  padding: 20px;
  background-color: #fff;
  height: 100vh;
  width: 250px;
}

.catalog-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.chapter-list {
  margin-top: 10px;
}

.chapter-title {
  font-size: 16px;
  padding: 10px 0;
}

.chapter-divider {
  height: 1px;
  background-color: #eee;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  background-color: #FF6600;
  color: white;
  border: none;
  border-radius: 3px;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>    